---
type: tutorial
title: Ajouter des styles pour l'ensemble du site
description: |-
  Tutoriel : Créer votre premier blog avec Astro —
  Créez une feuille de style globale pour mettre en forme l'ensemble du site
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous avez une page À propos mise en forme, il est temps d'ajouter quelques styles globaux pour le reste de votre site !

<PreCheck>
  - Appliquer des styles à l'ensemble du site
</PreCheck>

## Ajouter une feuille de style globale

Vous avez vu que la balise `<style>` d'Astro possède une **portée limitée par défaut**, ce qui signifie qu'elle n'affecte que les éléments de son propre fichier.

Il existe plusieurs façons de définir des styles de manière **globale** dans Astro, mais dans ce tutoriel, vous allez créer et importer un fichier `global.css` dans chacune de vos pages. Cette combinaison de feuille de style et de balise `<style>` vous permet de contrôler certains styles à l'échelle du site, et d'appliquer certains styles spécifiques exactement où vous le souhaitez.

<Steps>
1. Créez un nouveau fichier à l'emplacement `src/styles/global.css` (vous devrez d'abord créer un dossier `styles`).

2. Copiez le code suivant dans votre nouveau fichier, `global.css`

    ```css title="src/styles/global.css"
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }
    ```

3. Dans `about.astro`, ajoutez l'instruction d'importation suivante à votre frontmatter : 

    ```astro title="src/pages/about.astro" ins={2}
    ---
    import '../styles/global.css';

    const pageTitle = "À propos de moi";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Rédactrice technique",
      hobbies: ["photographie", "observation des oiseaux", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];

    const happy = true;
    const finished = false;
    const goal = 3;

    const skillColor = "crimson";
    const fontWeight = "bold";
    const textCase = "uppercase";
    ---
    ```

4. Vérifiez l'aperçu du navigateur de votre page À propos, et vous devriez maintenant voir de nouveaux styles appliqués !
</Steps>

<Box icon="puzzle-piece">

## Essayer par vous-même - Importer votre feuille de style globale

Ajoutez la ligne de code nécessaire à chaque fichier `.astro` de votre projet pour appliquer vos styles globaux à chaque page de votre site.

<details>
<summary>✅ Montrez-moi le code ! ✅</summary>

Ajoutez l'instruction d'importation suivante aux deux autres fichiers de page : `src/pages/index.astro` et `src/pages/blog.astro`

```astro title="src/pages/index.astro" ins={2}
---
import '../styles/global.css';
---
```
</details>
</Box>

Apportez les modifications ou ajouts souhaités au contenu de votre page À propos en ajoutant des éléments HTML au modèle de page, soit statiquement, soit dynamiquement. Ajoutez du JavaScript dans votre script du frontmatter pour fournir des valeurs à utiliser dans votre HTML. Lorsque vous êtes satisfait de cette page, validez vos modifications sur GitHub avant de passer à la leçon suivante.

<Box icon="question-mark">
### Analyser la formule

Votre page À propos est désormais mise en forme en utilisant *à la fois* le fichier `global.css` importé *et* une balise `<style>`.

- Les styles des deux méthodes de mise en forme sont-ils appliqués ? 

    <p>
      <Spoiler>Oui</Spoiler>
    </p>

- Y a-t-il des styles en conflit, et le cas échéant, lesquels sont appliqués ?

    <p>
      <Spoiler>Oui, `<h1>` a une taille de `2.5rem` globalement, mais `4rem` localement dans la balise `<style>`. La règle locale `4rem` est appliquée sur la page À propos.</Spoiler>
    </p>

- Décrivez comment `global.css` et `<style>` fonctionnent ensemble.

    <p>
      <Spoiler>Lorsque des styles en conflit sont définis à la fois globalement et dans une balise `<style>` locale d'une page, les styles locaux devraient écraser les styles globaux. (Cependant, il peut y avoir d'autres facteurs en jeu, il est donc toujours recommandé d'inspecter visuellement votre site pour vous assurer que vos styles soient correctement appliqués !)</Spoiler>
    </p>

- Comment choisiriez-vous de déclarer un style plutôt dans un fichier `global.css` ou dans une balise `<style>` ?

    <p>
      <Spoiler>Si vous souhaitez qu'un style soit appliqué à l'ensemble du site, vous choisiriez d'utiliser un fichier `global.css`. Cependant, si vous souhaitez que les styles s'appliquent uniquement au contenu HTML d'un seul fichier `.astro`, sans affecter d'autres éléments de votre site, vous choisiriez une balise `<style>`.</Spoiler>
    </p>

</Box>



<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je peux ajouter des styles CSS globaux en important un fichier `.css`.
</Checklist>
</Box>

### Ressources
- [Comparaison entre la syntaxe d'Astro et JSX](/fr/reference/astro-syntax/#différences-entre-astro-et-jsx)

- [La balise `<style>` d'Astro](/fr/guides/styling/#mettre-en-forme-avec-astro)

- [Les variables CSS dans Astro](/fr/guides/styling/#variables-css)
